<template>
  <div>
    <div class="app">
      <div class="head">
        商品详情
        <span class="arrow" @click="Jump_path"></span>
      </div>
      <!-- 轮播 -->
      <div class="swipt-img">
        <div class="swipt-imgs">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item,index) in swiptlist1" :key="item+index">
              <div class="swipeimg">
                <img :src="item" />
              </div>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <!-- 标题 -->
      <div class="title-area">
        <span class="title">{{ lists.name }}</span>
      </div>
      <!-- 价格 -->
      <div class="info">
        <div>
          <div class="comp-price-area2">
            <span class="price del">{{ lists.price }}</span>
            <span class="coupon-price">{{ lists.coupon_price }}</span>
            <img
              src=""
              alt=""
              class="coupon-flag"
            />
          </div>
        </div>
        <div :class="['likes','not-like',likesindex?'con':'']" @click="getlikes(lists)">
          <span class="likes-count">{{ lists.likes }}</span
          ><span class="likes-word">喜欢</span>
        </div>
      </div>
      <!-- 提示 -->
      <div class="tips-area">
        <div class="tips">
          <span class="intext"><span class="icon"></span>全场包邮</span>
          <span class="intext"><span class="icon"></span>赠送运费险</span>
          <span class="intext"><span class="icon"></span>量身推荐尺码</span>
        </div>
        <span class="go-icon icon-right-open"></span>
      </div>

      <div class="iii"></div>
      <!-- 优惠卷 -->
      <div class="detail-entry">
        <div class="comp-quan-entry">
          <div class="title">先领券再购买，可与折扣商品叠加使用</div>
          <div class="scroll">
            <ul>
              <li
                v-for="item in couponslist"
                :key="item.id"
                @click="getDiscount(item.id)"
              >
                   <div class="value">{{item.name}}</div>
          
   
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="iii"></div>
      <!-- 商品详情 -->
      <div class="detail-title"><span class="icon icon-bookmark"></span></div>
      <!-- 商品详情列表 -->
      <div class="detail-images">
        <div v-for="(item, index) in detailslist1" :key="item + index">
          <img :src="item" class="comp-lazy-img visible" />
        </div>
      </div>

      <!-- 底部购买 -->
      <div class="toolbar">
        <van-goods-action>
          <van-goods-action-icon
            icon="shop-o"
            text="首页"
            @click="onClickIcon(1)"
          ></van-goods-action-icon>
          <van-goods-action-icon
            icon="cart-o"
            text="购物车"
            :badge="shopnum"
            @click="onClickIcon(2)"
          ></van-goods-action-icon>

          <van-goods-action-button
            type="warning"
            text="加入购物车"
            @click="onClickButton(1)"
          >
          </van-goods-action-button>
          <van-cell is-link @click="showPopup"></van-cell>

          <van-goods-action-button
            type="danger"
            text="立即购买"
            @click="onClickButton(2)"
          ></van-goods-action-button>
        </van-goods-action>
      </div>
      <!-- 弹出层 -->

      <van-popup
        v-model="show"
        position="bottom"
        :style="{ height: '75%' }"
        closeable
        round
        close-icon-position="top-right"
      >
        <div class="item-info">
          <div class="item-picture">
            <img :src="skuimgurl" alt="" />
          </div>
          <div class="item-info-right">
            <span class="item-price">¥189.00</span
            ><span class="sku-choosen">请选择 {{ skuname }}: 颜色 尺码</span>
          </div>

          <div class="comp-sep"></div>

          <div class="sku-clothes">
            <div class="sku-clothes-type">
              <div class="type-name">{{ skuname }}</div>
            </div>
            <div class="sku-clothes-value">
              <div class="sku-item">
                <div class="sku-name">颜色</div>
                <div class="sku-btns">
                  <span
                    :class="['sku-btn', { cur: i == index }]"
                    v-for="(item, index) in skucolorlist"
                    :key="item"
                    @click="getcolor(item, index)"
                    >{{ item }}</span
                  >
                </div>
              </div>
              <div class="sku-item">
                <div class="sku-name">尺码</div>
                <div class="sku-btns">
                  <span
                    :class="['sku-btn', i1 == index ? 'cur' : '']"
                    v-for="(item, index) in skusizelist"
                    :key="item"
                    @click="getsize(item, index)"
                    >{{ item }}</span
                  >
                </div>
              </div>
            </div>
          </div>

          <div class="comp-sep"></div>

          <div class="sku-clothes">
            <div class="sku-clothes-type">
              <div class="type-name">数量</div>
            </div>
            <!-- 数量加减 -->
            <div class="sku-clothes-value">
              <div class="sku-amount">
                <van-stepper v-model="value" />
              </div>
            </div>
          </div>

          <div class="sku-submit" @click="getsubmit">确定</div>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script>
import { getalisdata } from "../api/alis.js";
export default {
  props: ["alisid"],
  data() {
    return {
      show: false,
      value: 1, //商品数量
      lists: "", //总数组
      likesindex:false,
      ii:0,
      detailslist: "", //详情数组
      detailslist1: [], //详情遍历数组
      swiptlist: "", //轮播数组
      swiptlist1: [],
      skuimglist: "", //商品图片信息
      skuimglist1: [], //图片数组
      skuname: "", //商品名称
      skucolorlist: [], //商品颜色数组
      skusizelist: [], //商品尺码数组
      skuimgurl: "", //商品显示图片
      skuimgindex: 0, //商品显示图片下标
      i: 999, //添加类名
      i1: 999, //添加类名
      colorname: "", //颜色
      sizename: "", //尺码
      zt: 0, //购物车和立即购买状态
      shopnum: 0, //购物车数量
      // 优惠券数组
      Discountlist: [
        {
          id: 171,
          condition: "满100可用",
          reason: "",
          value: 1000,
          name: "全场通用劵",
          startAt: "1668148701",
          endAt: "1702363101",
          valueDesc: "10",
          unitDesc: "元",
        },
        {
          id: 172,
          condition: "满200可用",
          reason: "",
          value: 2000,
          name: "全场通用劵",
          startAt: "1668148701",
          endAt: "1702363101",
          valueDesc: "20",
          unitDesc: "元",
        },
        {
          id: 173,
          condition: "满300可用",
          reason: "",
          value: 3000,
          name: "全场通用劵",
          startAt: "1668148701",
          endAt: "1702363101",
          valueDesc: "30",
          unitDesc: "元",
        },
        {
          id: 174,
          condition: "满400可用",
          reason: "",
          value: 4000,
          name: "全场通用劵",
          startAt: "1668148701",
          endAt: "1702363101",
          valueDesc: "40",
          unitDesc: "元",
        },
        {
          id: 175,
          condition: "满500可用",
          reason: "",
          value: 5000,
          name: "全场通用劵",
          startAt: "1668148701",
          endAt: "1702363101",
          valueDesc: "50",
          unitDesc: "元",
        },
      ],
      receivelist: [], //存储优惠券数组
      couponslist: [{ id: 171, name: "100 - 10 "},
      { id: 172, name: "200 - 20" },
      { id: 173, name: "300 - 30" },
      { id: 174, name: "400 - 40" },
      { id: 175, name: "500 - 50" }
      ],
      
    };
  },
  methods: {
    Jump_path() {
      this.$router.go(-1);
    },

    //获取商品详细数据
    getalisdatalist() {
      getalisdata({ id: this.alisid }).then((data) => {
        this.lists = data.data;
        console.log(this.lists, "4444");
        this.ii= this.lists.likes


        //初始化
         let sclist = window.localStorage.getItem("sclist");
          sclist = JSON.parse(sclist);
          sclist.forEach(item=>{
           if( item.id==this.lists.id){
            this.likesindex=true
           }
          })

        //货物图片信息
        this.skuimglist = data.data.sku_img;
        this.skuimglist = JSON.parse(this.skuimglist).items;
        this.skuname = this.skuimglist[0].kinds[0].split("|")[1];
        console.log(this.skuimglist[0].kinds[0].split("|")[1]);
        this.skuimglist.forEach((item, i) => {
          this.skuimglist1.push({ id: i, url: item.img });
        });
        console.log(this.skuimglist1[0].url,'1232');
        //获取显示图片
        this.skuimgurl = this.skuimglist1[this.skuimgindex].url;
        console.log(this.lists.sku);
        let set1 = new Set();
        let set2 = new Set();
        this.lists.sku.forEach((item) => {
          this.skucolorlist = set1.add(item.color);
          this.skusizelist = set2.add(item.size);
        });

        //优惠券数组
        // this.couponslist = data.data.coupons.items;
        // console.log(this.couponslist);
        //轮播数组
        this.swiptlist = data.data.pics.split("[")[1].split("]")[0];
        this.swiptlist = this.swiptlist.split('"');
        this.swiptlist.forEach((item, i) => {
          if (i % 2 != 0) {
            this.swiptlist1.push(item);
          }
        });
        // console.log(this.swiptlist1);
        //详情数组
        this.detailslist = data.data.desc.split("[")[1].split("]")[0];
        this.detailslist = this.detailslist.split('"');
        this.detailslist.forEach((item, i) => {
          if (i % 2 != 0) {
            this.detailslist1.push(item);
          }
        });
      });
    },
    //vant2组件
    onClickIcon(i) {
      if (i == 1) {
        this.$router.push({ name: "home" });
      } else {
        this.$router.push({ name: "shop" });
      }
    },
    //购物车与购买
    onClickButton(n) {
      //重置
      this.i = 999;
      this.i1 = 999;
      this.colorname = "";
      this.sizename = "";
      this.zt = n;
      this.show = true;
      console.log(this.zt);
    },
    showPopup() {
      this.show = true;
    },
    getlikes(lists){
      console.log(lists);
      this.likesindex=!this.likesindex
    },
    //获取颜色
    getcolor(item, index) {
      this.skuimgindex = index;
      this.skuimgurl = this.skuimglist1[this.skuimgindex].url;
      this.i = index;
      this.colorname = item;
    },
    //获取尺码
    getsize(item, index) {
      this.i1 = index;
      this.sizename = item;
    },
    //提交数据
    getsubmit() {
      let token = window.localStorage.getItem("token");
      if (!token) {
        this.$router.push({ name: "login" });
        return;
      }
      if (this.colorname != "" && this.sizename != "") {
        if (this.zt == 1) {
          console.log("gwc");
          let shoppinglist = window.localStorage.getItem("shoppinglist");
          shoppinglist = JSON.parse(shoppinglist);
          //去重

          for (let i = 0; i < shoppinglist.length; i++) {
            if (
              shoppinglist[i].name == this.lists.name &&
              shoppinglist[i].size == this.sizename &&
              shoppinglist[i].color == this.colorname
            ) {
              shoppinglist[i].num += this.value;
              shoppinglist = JSON.stringify(shoppinglist);
              window.localStorage.setItem("shoppinglist", shoppinglist);
              console.log("有重复");
              this.show = false;
              return;
            }
          }

          console.log("去重l");
          shoppinglist.push({
            id: this.lists.id,
            name: this.lists.name,
            imgurl: this.skuimgurl,
            coupon_price: this.lists.coupon_price,
            num: this.value,
            checked: false,
            size: this.sizename,
            color: this.colorname,
            ztm: 1,
          });
          // 去重

          this.shopnum = shoppinglist.length;
          shoppinglist = JSON.stringify(shoppinglist);
          window.localStorage.setItem("shoppinglist", shoppinglist);
        } else {
          console.log("ljgm");
          this.$emit("getpaymentlist", [
            {
              id: this.lists.id,
              name: this.lists.name,
              imgurl: this.skuimgurl,
              coupon_price: this.lists.coupon_price,
              num: this.value,
              checked: true,
              size: this.sizename,
              color: this.colorname,
              ztm: 2,
            },
          ]);
          this.$router.push({ name: "order" });
        }

        this.show = false;
      } else {
        this.$toast("请选择颜色和尺码");
      }
    },
    //领取优惠券
    getDiscount(id) {
    
      
      //领取
      this.Discountlist.forEach((item) => {
        if (item.id == id) {
          if(this.receivelist.length>0){
  this.receivelist = this.receivelist.filter((item) => {
          return item.id != id;
        });
}
          this.receivelist.push(item);
          this.$toast("领取成功");
        }
      });
      console.log(this.receivelist,'去重前');
      //去重
      this.receivelist = [...new Set(this.receivelist)];
      console.log(this.receivelist);
    },
  },
  created() {
        //收藏数组
          if (window.localStorage.getItem("sclist") == null) {
      window.localStorage.setItem("sclist", "[]");
    }
    
    console.log(this.alisid);
    this.getalisdatalist();
 
    //本地存储购物车信息
    if (window.localStorage.getItem("shoppinglist") == null) {
      window.localStorage.setItem("shoppinglist", "[]");
    }
    let shoppinglist = window.localStorage.getItem("shoppinglist");
    shoppinglist = JSON.parse(shoppinglist);
    this.shopnum = shoppinglist.length;

    //存储优惠券数组

    if (window.localStorage.getItem("Securitieslist") == null) {
      window.localStorage.setItem("Securitieslist", "[]");
    }
    let Securitieslist = window.localStorage.getItem("Securitieslist");
    Securitieslist = JSON.parse(Securitieslist);
    this.receivelist = Securitieslist;
  
  },

  

  computed: {},
watch:{
likesindex(){
 if(this.likesindex==true){
  this.lists.likes+=1
 }else{
  this.lists.likes=this.ii
 }
}
},
  beforeUpdate() {
    let Securitieslist = this.receivelist;
    Securitieslist = JSON.stringify(Securitieslist);
    window.localStorage.setItem("Securitieslist", Securitieslist);
  },
  beforeDestroy() {
    let Securitieslist = this.receivelist;
    Securitieslist = JSON.stringify(Securitieslist);
    window.localStorage.setItem("Securitieslist", Securitieslist);
    if(this.likesindex==true){
      this.lists.imgurl=this.skuimglist[0].img
       let sclist = window.localStorage.getItem("sclist");
          sclist = JSON.parse(sclist);
            sclist = sclist.filter((item) => {
          return item.id != this.lists.id;
        });
      sclist.push(this.lists)

    sclist = JSON.stringify(sclist);
    window.localStorage.setItem("sclist", sclist);
    }else{
     
       let sclist = window.localStorage.getItem("sclist");
          sclist = JSON.parse(sclist);
          if(sclist.length!=0){
                   sclist = sclist.filter((item) => {
          return item.id != this.lists.id;
        });
    sclist = JSON.stringify(sclist);
    window.localStorage.setItem("sclist", sclist);
          }

    }
  },
};
</script>
<style scoped>
body {
  --color-primary: #5a75d6;
  --color-accent: #fc7967;
  --color-add-cart: #fecd4c;
  --color-primary-darken: #3254cb;
  --color-accent-darken: #fb4d35;
  --color-add-cart-darken: #febf19;
}
.head {
  position: fixed;
  top: 0;
  left: 0%;
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
  color: rgb(59, 59, 59);
  z-index: 999;
  background: #fff;
}
.arrow {
  display: block;
  width: 12px;
  height: 23px;
  position: absolute;
  top: 15px;
  left: 20px;
  z-index: 999;
  background: url(../../public/assets/images/ic_arrow_home.png);
  transform: rotate(180deg);
}
.swipt-imgs {
  margin-top: 50px;
  width: 100%;
  height: 390px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 20px;
  text-align: center;
  /* background-color: #39a9ed; */
}
.title-area {
  margin: 12px;
}
.title-area .title {
  color: #595c61;
  font-size: 18px;
  vertical-align: middle;
}
.info {
  margin: 12px 22px;
  position: relative;
}
*,
:after,
:before {
  box-sizing: inherit;
}
.comp-price-area2 .price.del,
.comp-price-area2 .price.sep {
  color: #a9acb3;
  margin-right: 12px;
  font-size: 16px;
  font-weight: 400;
}
.comp-price-area2 .coupon-price,
.comp-price-area2 .price,
.comp-price-area2 .vip-price {
  /* font-size: 20px; */
  line-height: 30px;
  /* font-weight: 500; */
  color: #af0000;
  display: inline-block;
  position: relative;
}
.comp-price-area2 .price.del:before,
.comp-price-area2 .price.sep:before {
  font-size: 11px;
}

.comp-price-area2 .coupon-price:before,
.comp-price-area2 .price:before,
.comp-price-area2 .vip-price:before {
  content: "¥";
  font-size: 14px;
  margin-right: 2px;
}
.comp-price-area2 .price.del:after,
.comp-price-area2 .price.sep:after {
  content: "";
  background-color: #a9acb3;
  display: inline-block;
  position: absolute;
  bottom: 50%;
  height: 1px;
}

.comp-price-area2 .price.del:after {
  left: -4px;
  right: -4px;
}
.comp-price-area2 .coupon-price,
.comp-price-area2 .price,
.comp-price-area2 .vip-price {
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
  color: #af0000;
  display: inline-block;
  position: relative;
}
.comp-price-area2 .coupon-price:before,
.comp-price-area2 .price:before,
.comp-price-area2 .vip-price:before {
  content: "¥";
  font-size: 14px;
  margin-right: 2px;
}
.comp-price-area2 .coupon-flag {
  margin-right: 12px;
}
img {
  pointer-events: none;
}
audio,
embed,
iframe,
img,
object,
video {
  height: auto;
  max-width: 100%;
}
.info .likes.not-like {
  background-color: #f5f5f5;
  color: #595c61;
}

.info .likes {
  position: absolute;
  right: 0;
  top: -10px;
  background-color: #fc7967;
  background-color: var(--color-accent, #fc7967);
  color: #fff;
  width: 50px;
  /* height: 50px; */
  line-height: 17px;
  padding: 8px 0;
  text-align: center;
  box-shadow: 0 8px 8px -2px rgb(0 0 0 / 10%);
}
.likes .likes-count {
  display: block;
  font-size: 15px;
}
.tips-area {
  padding-top: 6px;
  display: flex;
  align-items: center;
}
.tips-area .tips {
  flex: 1;
  color: #a9acb3;
  margin: 0 20px;
  height: 32px;
  line-height: 32px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}
.intext {
  position: relative;
}
.icon {
  position: absolute;
  top: 9px;
  left: -14px;
  display: block;
  width: 14px;
  height: 14px;
  background: url(../../public/assets/images/cion.png);
  overflow: hidden;
  border-radius: 20px;
  background-size: 100% 100%;
}
.iii {
  width: 100%;
  height: 25px;
  background: rgb(245, 245, 245);
}
.detail-entry {
  margin-bottom: 12px;
  background-color: #fff;
  overflow: hidden;
}
.comp-quan-entry {
  height: 92px;
  background-color: #fff;
}
.comp-quan-entry .title {
  height: 36px;
  line-height: 36px;
  text-align: center;
  color: #a9acb3;
  font-size: 12px;
}
.comp-quan-entry .scroll {
height:56px;
overflow: hidden;
  position: relative;
}
.comp-quan-entry ul {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  padding-bottom: 30px;
  -webkit-overflow-scrolling: touch;
}

ul {
  list-style: none;
}
.comp-quan-entry ul:after,
.comp-quan-entry ul:before {
  content: "";
  width: 6px;
  display: inline-block;
  flex: none;
}
.comp-quan-entry ul li {
  display: inline-block;
  color: #a9acb3;
  padding: 0 6px;
  flex: none;
}
.comp-quan-entry ul li img {
  height: 44px;
  width: 132px;
}

img {
  pointer-events: none;
}

.detail-title {
  color: #595c61;
  background-color: #fff;
  font-size: 15px;
  height: 48px;
  line-height: 48px;
  background: url(../../public/assets/images/spxq.png);
}
.page-item-detail .detail-images img {
  display: block;
  width: 100%;
}
.comp-lazy-img.visible {
  -webkit-animation: comp-lazy-img-fadeIn 0.35s ease-in-out 0s 1 both;
  animation: comp-lazy-img-fadeIn 0.35s ease-in-out 0s 1 both;
}
.toolbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #fff;
  padding-bottom: env(safe-area-inset-bottom);
  font-size: 0;
  display: flex;
  align-items: center;
}
.van-cell {
  display: none;
}
.item-info {
  margin-top: 25px;
  padding-bottom: 12px;
  position: relative;
}
.item-info .item-picture {
  position: absolute;
  top: -15px;
  left: 12px;
  width: 120px;
  height: 120px;
  border-radius: 4px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 8px 8px -2px rgb(0 0 0 / 10%);
  z-index: 999;
}

.item-info .item-info-right {
  margin-left: 140px;
  margin-right: 12px;
  overflow: hidden;
  min-height: 95px;
}
.item-info .item-info-right .item-price {
  color: #000c18;
  font-size: 16px;
  display: block;
  margin-top: 12px;
  margin-bottom: 6px;
}
.item-info .item-info-right .sku-choosen {
  color: #595c61;
  font-size: 12px;
  display: block;
  word-break: break-all;
}
.comp-sep {
  width: 100%;
  height: 1px;
  background-color: #e5e5e5;
  margin-top: 20px;
}
.sku-clothes {
  padding: 0 12px;
  overflow: hidden;
}
.sku-clothes .sku-clothes-type {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.sku-clothes .sku-clothes-type .type-name {
  color: #595c61;
  font-size: 17px;
  line-height: 44px;
  height: 44px;
  min-width: 66px;
}
.sku-clothes .sku-clothes-value {
  color: #a9acb3;
}
.sku-clothes .sku-clothes-value .sku-item {
  min-height: 30px;
  position: relative;
}
.sku-clothes-value .sku-item .sku-name {
  position: absolute;
  left: 0;
  top: 0;
  color: #a9acb3;
  font-size: 14px;
  line-height: 18px;
  margin-top: 6px;
  text-align: right;
  width: 66px;
}
.sku-clothes .sku-clothes-value .sku-item .sku-btns {
  margin-left: 66px;
}
.sku-clothes .sku-clothes-value .sku-item .sku-btns .sku-btn {
  position: relative;
  display: inline-block;
  color: #595c61;
  line-height: 30px;
  padding: 0 12px;
  margin-left: 12px;
  margin-bottom: 12px;
  background-color: #fff;
  border: 1px solid #e5e5e5;
}
.sku-clothes .sku-clothes-value .sku-item .sku-btns .sku-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}
.sku-clothes {
  padding: 0 12px;
  overflow: hidden;
}
.sku-clothes .sku-clothes-type {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.sku-clothes .sku-clothes-type .type-name {
  color: #595c61;
  font-size: 17px;
  line-height: 44px;
  height: 44px;
  min-width: 66px;
}
.sku-clothes .sku-clothes-value .sku-amount {
  font-size: 0;
  margin-left: 78px;
  margin-bottom: 42px;
}
.sku-submit {
  display: block;
  height: 49px;
  line-height: 49px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  background-color: #ef4b37;
}
.swipeimg {
  width: 100%;
  height: 390px;
}
.swipeimg img {
  width: 100%;
  height: 100%;
}
.cur {
  color: rgb(203, 169, 123) !important;
  border: 1px solid rgb(203, 169, 123) !important;
  background-color: rgba(203, 169, 123, 0.2) !important;
}
.value{
  width: 150px;
  height: 56px;
  color: #fff;
  background-color: rgb(90, 117, 214);
  text-align: center;
  line-height: 56px;
  font-size: 20px;
  font-weight: 400;
  border-radius: 10px;
}
.con{
  background-color: rgb(252, 121, 103) !important;
  color: #fff !important;
}
</style>